<template>
	<view class="form">
		<form @submit="onSubmit">
			<!-- 用户name -->
<!-- 			<view class="item">
				<view class="itemText">
					用户姓名：
				</view>
				<view class="itemInput">
					<input v-model="userList.userName"
					type="text" maxlength="11"
					placeholder="请输入姓名" @input="sumNameLen">
					
					<view class="limitIput">
						{{nameLen}}/11
					</view>

				</view>

			</view> -->
			<!-- 用户目标院校 -->
			<view class="item">
				<view class="itemText">
					目标院校：
				</view>
				
				<view class="itemInput">
					<input v-model="userList.targetUniversity"
					type="text" maxlength="8"
					placeholder="请输入目标院校" @input="sumUniversityLen">
					
					<view class="limitIput">
						{{universityLen}}/8
					</view>
				</view>

			</view>
			<!-- 用户个性签名 -->
			<view class="item">
				<view class="itemText">
					个性签名：
				</view>
				
				<view class="itemInput">
					<textarea v-model="userList.usersign"
					maxlength="18"
					name="content" placeholder="请输入个性签名" @input="sumSignLen"></textarea> 
					
					<view class="limitTextarea">
						{{signLen}}/18
					</view>
				</view>

			</view>
			<!-- 按钮 --><!-- 用submit事务记得带上form-type，不然没有效果 -->
			<view class="itemButton">
				<button   @click="resetData">重置</button>
				<button  form-type="submit" type="primary" :disabled="inDisable(userList)">提交</button>   
				
			</view>
		</form>
		
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				uid:0,
				nameLen:0, //记录用户姓名输入长度
				universityLen:0,  //记录用户目标院校输入长度
				signLen:0,		//记录用户个性签名输入长度
				show:false,
				userList:[]    //保存获取用户信息数组
			}
		},
		onReady() {
			
		},
		onLoad(e) {
			console.log("e",e);
			this.getUser(e);
		},
		methods:{
			//提交个人信息
			async onSubmit(e){
				const submit =  db.collection("uni-id-users").where({
					_id:this.uid
				})
				.update({
					targetUniversity:this.userList.targetUniversity,
					usersign:this.userList.usersign
				});
				submit.then(res=>{
					uni.setStorageSync("user-targetUniversity",this.userList.targetUniversity);
					uni.setStorageSync("user-usersign",this.userList.usersign);
					// console.log("提交成功");
					uni.showToast({
						title:"修改成功~"
						})
					setTimeout(()=>{
						uni.navigateBack();
					},900)	
				})
				// uniCloud.callFunction({
				// 	name:"updataPersonInfo",
				// 	data:{
				// 		form:this.userList
				// 	}
				// }).then(res=>{
				// 		uni.showToast({
				// 			title:"修改成功~"
				// 	})
				// 	setTimeout(()=>{
				// 		uni.reLaunch({
				// 			url:"/pages/person/person"
				// 		})
				// 	},900)	
				// })
			},
			
			// 重置from
			resetData(){
				userList:[];
				this.getUser();
			},
			//判断新增输入文章是否为空
			inDisable(obj){
				for(let key in obj){
					if(!obj[key]){
						return true;
					}
				}
			},
			// 获取用户信息
			async getUser(e){
				const uid = e.uid;
				this.uid = uid;
				const userData = db.collection("uni-id-users").where({
					_id:uid
				}).field("targetUniversity,usersign")
				.get();
				userData.then(res=>{
					this.userList =  res.result.data[0];
					console.log("this.userList",this.userList);
					if(this.userList.targetUniversity){
						this.universityLen = this.userList.targetUniversity.length;
					}else if(this.userList.usersign){
						this.signLen = this.userList.usersign.length;
					}
					// this.university = res.result.data[0].targetUniversity.length;
					// this.sign = res.result.data[0].signature.length;
				})
				// uniCloud.callFunction({
				// 	name:"getUserInfo",
					
				// }).then(res=>{
				// 	console.log("getUser",res);
				// 	this.userList=res.result.data[0];
				// 	this.nameLen = res.result.data[0].userName.length;
				// 	this.university = res.result.data[0].targetUniversity.length;
				// 	this.sign = res.result.data[0].signature.length;
				// }).catch(()=>{
				// 	uni.showToast({
				// 		title:"用户信息获取失败",
				// 		icon:'error'
				// 	})
				// })
			},
			// 统计用户姓名输入长度
			sumNameLen(len){   
				// console.log("len",len);
				this.nameLen=len.detail.value.length;
				if(this.nameLen == 0){
					uni.showToast({
						title: '用户姓名不能为空，请填写！',
						icon:'none',
						duration: 2000
					});
				}
			},
			// 统计用户目标院校输入长度
			sumUniversityLen(len){   
				this.universityLen=len.detail.value.length;
				if(this.universityLen == 0){
					uni.showToast({
						title: '目标院校不能为空，请填写！',
						icon:'none',
						duration: 2000
					});
				}
			},// 统计用户个性签名输入长度
			sumSignLen(len){   
				this.signLen=len.detail.value.length;
				if(this.signLen == 0){
					uni.showToast({
						title: '个性签名不能为空，请填写！',
						icon:'none',
						duration: 2000
					});
				}
			}		

		}
	}
</script>

<style lang="scss">
	view{
		box-sizing: border-box;
	}
	page{
		background-color: #ffffff;
	}
	
	.form{
		margin-top: 20rpx;
	}
	
	.item{
		display: flex;
		padding: 18rpx 12rpx;
		align-items: center;
		.itemText{
			width: 20%;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
		}
		.itemInput{
			width: 75%;
			display: flex;
			align-items: center;
			position: relative;
			justify-content: space-between;
			input{
				width: 520rpx;
				border: 1rpx solid #999999;
				padding: 5rpx;
				border-radius: 16rpx;
			}
			textarea{
				// position: relative;
				height: 150rpx;
				border: 1rpx solid #999999;
				border-radius: 16rpx;
				padding: 12rpx;
			}
			.limitIput{
				font-size: 24rpx;
				color: #999999;
				position: absolute;
				right: 28rpx;
			}
			.limitTextarea{
				position: absolute;
				bottom: 18rpx;
				right: 18rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.itemButton{
		display: flex;
		justify-content: space-between;
		margin-top: 200rpx;
		button{
			padding-bottom: 12rpx;
		}

	}
</style>
